<template>
  <div class="page5">
    <h2 class="wow" style="visibility: visible">大宅装修费用规划</h2>
    <div class="wrap wow" style="visibility: visible">
      <ul>
        <li v-for="(item, index) in List" :key="index">
          <img :src="'/src/assets/img/matericl/p5_0' + (index + 1) + '.png'" alt="" />
          <div>{{ item.title }}</div>
          <p>{{ item.dis }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const List = ref([
  {
    title: '软装',
    dis: '23-30%'
  },
  {
    title: '基础装修',
    dis: '20-26%'
  },
  {
    title: '土建',
    dis: '10-16%'
  },
  {
    title: '智能/设备',
    dis: '9-14%'
  },
  {
    title: '设计',
    dis: '3-6%'
  },
  {
    title: '主材',
    dis: '29-35%'
  }
])
</script>

<style>
.cherrypick .page5 {
  background: #fff;
  padding: 1rem 0;
}

.cherrypick .page5 > h2 {
  text-align: center;
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.71rem;
}

.cherrypick .page5 .wrap,
.cherrypick .page5 > h2 {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.cherrypick .page5 .wrap {
  background: url(/src/assets/img/matericl/p5_bj.png) no-repeat 50%;
  background-size: 7.01rem 4.46rem;
  width: 100%;
  height: 7rem;
  position: relative;
}

.cherrypick .page5 .wrap ul li {
  position: absolute;
}

.cherrypick .page5 .wrap ul li img {
  display: block;
  margin: 0 auto;
  max-width: 0.38rem;
  -webkit-animation: bounce-data-v-09df87d4 1.5s linear infinite;
  animation: bounce-data-v-09df87d4 1.5s linear infinite;
}

@keyframes bounce-up-data-v-09df87d4 {
  10% {
    transform: rotate(20deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(5deg);
  }

  40% {
    transform: rotate(-5deg);
  }

  50%,
  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes bounce-data-v-09df87d4 {
  0%,
  20%,
  53%,
  80%,
  to {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(0);
  }

  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.2rem, 0);
  }

  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.1rem, 0);
  }

  90% {
    transform: translate3d(0, -0.03rem, 0);
  }
}

@keyframes bounce-data-v-09df87d4 {
  0%,
  20%,
  53%,
  80%,
  to {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(0);
  }

  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.2rem, 0);
  }

  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.1rem, 0);
  }

  90% {
    transform: translate3d(0, -0.03rem, 0);
  }
}

.cherrypick .page5 .wrap ul li div {
  text-align: center;
  font-size: 0.34rem;
  font-weight: 700;
  color: #000;
  margin: 0.1rem 0 0.05rem;
}

.cherrypick .page5 .wrap ul li p {
  font-size: 0.24rem;
  font-family: Gilroy-Bold;
  font-weight: 700;
  color: #dd292c;
  text-align: center;
}

.cherrypick .page5 .wrap ul li:first-child {
  left: 2.46rem;
  top: 0;
}

.cherrypick .page5 .wrap ul li:nth-child(2) {
  right: 0.08rem;
  top: 2rem;
}

.cherrypick .page5 .wrap ul li:nth-child(3) {
  right: 1.7rem;
  bottom: -0.1rem;
}

.cherrypick .page5 .wrap ul li:nth-child(4) {
  right: 3.4rem;
  bottom: -0.1rem;
}

.cherrypick .page5 .wrap ul li:nth-child(5) {
  right: 5.26rem;
  bottom: -0.1rem;
}

.cherrypick .page5 .wrap ul li:nth-child(6) {
  left: 0.2rem;
  top: 3.2rem;
}
</style>